<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form px-[15px] pt-[15px] border-bottom">
      <el-form>
        <el-row :gutter="12">
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="form.name" placeholder="用户名/昵称/备注" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <div class="w-full flex justify-between">
                <el-date-picker
                  v-model="form.date"
                  type="daterange"
                  unlink-panels
                  range-separator="－"
                  start-placeholder="选择开始时间"
                  end-placeholder="选择结束时间"
                  :disabled-date="disableFutureDates"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" @click.stop="search">搜索</el-button>
              <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="grow-[1] h-0 mx-[15px] mt-[10px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        style="width: 100%"
        height="100%"
        border
        stripe
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="Name" label="用户名" show-overflow-tooltip />
        <el-table-column align="center" prop="Nickname" label="昵称" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.Nickname || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="LotteryName" label="游戏" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            {{ row.LotteryName || "--" }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="Coin" label="佣金" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.Coin"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="BetAmount" label="流水" show-overflow-tooltip>
          <template #default="{ row }: TableItem">
            <ui-amount :num="row.BetAmount"></ui-amount>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="BetAmount"
          label="时间"
          show-overflow-tooltip
          width="170"
        >
          <template #default="{ row }: TableItem">
            {{ formatDate(row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="{ row }: TableItem">
            <div class="text-center text-green" v-if="row.IsBack == 1">已回水</div>
            <div class="text-center text-red" v-if="row.IsBack == 2">已拒绝</div>
            <el-button
              v-if="row.IsBack == 0 && premsStore.isEditBackwaterSetting"
              type="success"
              size="small"
              @click.stop="handleAction(row, 1)"
            >
              发放
            </el-button>
            <el-button
              v-if="row.IsBack == 0 && premsStore.isEditBackwaterSetting"
              type="danger"
              size="small"
              @click.stop="handleAction(row, 2)"
            >
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end my-[10px] mx-[15px]">
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import moment from "moment";
import { useList } from "@/hooks/useList";
import { disableFutureDates, formatDate, getDateArray } from "@/utils/common";
import { reqBackWaterList, reqUserBackWaterGrant, reqUserBackWaterReject } from "@/api/backwater";
import { ElMessageBox } from "element-plus";
import { usePremsStore } from "@/store/modules/prems";

interface TableItem {
  row: BackWaterMo;
}

const form = reactive({
  name: "",
  date: getDateArray()["today"]
});
const premsStore = usePremsStore();
const getParams = () => {
  const params: any = {
    StartTime: moment(form.date[0]).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(form.date[1]).format("YYYY-MM-DD 23:59:59")
  };
  if (form.name) {
    params.UserName = form.name;
  }
  return params;
};
const { elTableRef, state, list, getData, search } = useList<BackWaterMo, any>(
  reqBackWaterList,
  getParams
);

// 重置
const handleRefresh = () => {
  form.name = "";
  form.date = getDateArray()["today"];
  search();
};

// 发放/拒绝
const handleAction = (row: BackWaterMo, type: 1 | 2 = 1) => {
  // 弹框操作
  ElMessageBox.confirm(`是否进行【${type == 1 ? "发放" : "拒绝"}】操作`, "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    distinguishCancelAndClose: true,
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true; // 设置 "确定" 按钮加载中
          if (type == 1) {
            await reqUserBackWaterGrant(row.Id);
          } else {
            await reqUserBackWaterReject(row.Id);
          }
          getData();
          done();
          instance.confirmButtonLoading = false;
        } catch (error) {
          done();
          console.error("操作失败", error);
          instance.confirmButtonLoading = false; // 如果失败，取消加载状态
        }
      } else {
        done(); // 取消时直接关闭
      }
    }
  });
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped></style>
